<div id="charge_item_set">
    <div class="charge_item_set">
        <!--搜索栏-->
        <el-row class="table_search">
            <el-col :span="12">
                <template>
                    <el-input
                            placeholder="请输入项目名进行搜索"
                            style="width: 220px;"
                            clearable
                            v-model="parameters.searchContent">
                    </el-input>
                    <el-button type="primary"  @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>
            <el-col :span="12" class="btnTypeSet">
                <el-button type="primary"
                           icon="el-icon-plus"
                           @click="openAddChargeItem">新增项目</el-button>
            </el-col>
        </el-row>
        <!--表格-->
        <el-table
                size="mini"
                :data="tableData"
                @row-click="handleRowHandle"
                @cell-mouse-enter="mouseEnterEvent"
                align="center"
                style="width: 100%;text-align: center;">
            <el-table-column
                    align="center"
                    width="200"
                    prop="projectName"
                    label="项目名称">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="200"
                    prop="typeName"
                    label="项目类型">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="200"
                    prop="startDate"
                    label="项目起始时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="200"
                    prop="endDate"
                    label="项目结束时间">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            class="btn"
                    @click="amendChargeItem(scope.$index, scope.row)">修改</el-button>
                    <el-button
                            size="mini"
                            type="text"
                            class="btn-Del"
                            @click="deleteRow(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="footerBox">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :current-page.sync="currentPage"
                    :total="totalCount">
            </el-pagination>
        </div>

        <!--新增弹出框-->
        <el-dialog title="添加收费项目" :visible.sync="dialogAddChargeItemVisible" :before-close="emptyContent">
            <el-form
                    class="add-template-form"
                    :rules="rules"
                    ref="addChargeItemForm"
                    :model="addChargeItemForm"
                    label-width="150px"
                    :label-position="labelPosition">
                <el-form-item label="项目名称：" prop="projectName">
                    <el-input v-model="addChargeItemForm.projectName" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="请选择项目类型：" prop="projectTypeId">
                    <el-select v-model="addChargeItemForm.projectTypeId" placeholder="请选择项目类型" style="width: 60%;">
                        <el-option
                                v-for="item in typeNames"
                                :key="item.projectTypeId"
                                :label="item.projectTypeName"
                                :value="item.projectTypeId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目起始时间：" prop="startDate">
                    <el-date-picker
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择开始日期"
                            v-model="addChargeItemForm.startDate"
                            style="width: 60%;"></el-date-picker>
                </el-form-item>
                <el-form-item
                        label="项目结束时间："
                        prop="endDate">
                    <el-date-picker
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择结束日期"
                            v-model="addChargeItemForm.endDate"
                            style="width: 60%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="项目描述：" prop="projectDesc">
                    <el-input type="textarea" v-model="addChargeItemForm.projectDesc" style="width: 60%;"></el-input>
                </el-form-item>
            </el-form>
            <!--底部按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="addCaleForm('addChargeItemForm')">取 消</el-button>
                <el-button type="primary" @click="goConfirm('addChargeItemForm')">确 定</el-button>
            </div>
        </el-dialog>

        <!--修改弹出框-->
        <el-dialog title="修改收费项目" :visible.sync="dialogAmendChargeItemVisible" :before-close="emptyContent">
            <el-form
                    class="add-template-form"
                    :rules="rules"
                    ref="amendChargeItemForm"
                    :model="amendChargeItemForm"
                    label-width="150px"
                    :label-position="labelPosition">
                <el-form-item label="项目名称：" prop="projectName">
                    <el-input v-model="amendChargeItemForm.projectName" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="请选择项目类型：" prop="projectTypeId">
                    <el-select v-model="amendChargeItemForm.projectTypeId" placeholder="请选择项目类型" style="width: 60%;">
                        <el-option
                                v-for="item in typeNames"
                                :key="item.projectTypeId"
                                :label="item.projectTypeName"
                                :value="item.projectTypeId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                        label="项目起始时间："
                        prop="startDate">
                    <el-date-picker
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="请选择开始日期"
                            v-model="amendChargeItemForm.startDate"
                            style="width: 60%;"></el-date-picker>
                </el-form-item>
                <el-form-item
                        label="项目结束时间："
                        prop="endDate">
                    <el-date-picker
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="请选择结束日期"
                            v-model="amendChargeItemForm.endDate"
                            style="width: 60%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="项目描述：" prop="projectDesc">
                    <el-input type="textarea" v-model="amendChargeItemForm.projectDesc" style="width: 60%;"></el-input>
                </el-form-item>
            </el-form>
            <!--底部按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="amendCaleForm('amendChargeItemForm')">取 消</el-button>
                <el-button type="primary" @click="goConfirm('amendChargeItemForm')">确 定</el-button>
            </div>
        </el-dialog>

        <!--详情弹出框-->
        <el-dialog class="dialogDetails" title="收费项目设置详情" :visible.sync="dialogChargeItemInfoVisible">
            <div class="info-template-content">
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">项目名称</el-col>
                    <el-col :span="19" style="color: #333">{{chargeItemInfo.projectName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">项目类型</el-col>
                    <el-col :span="19" style="color: #333">{{chargeItemInfo.typeName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">项目起始时间</el-col>
                    <el-col :span="19" style="color: #333">{{chargeItemInfo.startDate}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">项目结束时间</el-col>
                    <el-col :span="19" style="color: #333">{{chargeItemInfo.endDate}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">状态</el-col>
                    <el-col :span="19" style="color: #333">{{chargeItemInfo.status}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">项目描述</el-col>
                    <el-col :span="19" style="color: #333">{{chargeItemInfo.projectDesc}}</el-col>
                </el-row>
            </div>
            <!--底部按钮-->
            <!--<div slot="footer" class="dialog-footer">-->
                <!--<el-button @click="dialogChargeItemInfoVisible = false">取 消</el-button>-->
                <!--<el-button type="primary" @click="dialogChargeItemInfoVisible = false">确 定</el-button>-->
            <!--</div>-->
        </el-dialog>

    </div>
</div>
<!--[if IE]>
<script>
    goIEPage(IEVersion(),'${basePath}/chargeItemIE9');
</script>
<![endif]-->
<script>
    // 验证日期间隔
    function validateTime(rule, value, callback){
        // 增加弹窗的时间间隔控制
        if(charge_item_set.dialogAddChargeItemVisible){
            if(charge_item_set.addChargeItemForm.startDate === ''){
                callback(new Error('请先选择开始日期'));
                charge_item_set.addChargeItemForm.endDate = '';
            } else {
                var startT = charge_item_set.addChargeItemForm.startDate;
                var endT = charge_item_set.addChargeItemForm.endDate;
                startT = (new Date(startT)).getTime();
                endT = (new Date(endT)).getTime();
                if(startT > endT){
                    callback(new Error('请选择正确的结束日期'));
                } else {
                    callback();
                }
            }
        }
        // 修改的时间间隔控制
        if(charge_item_set.dialogAmendChargeItemVisible){
            if(charge_item_set.amendChargeItemForm.startDate === ''){
                callback(new Error('请先选择开始日期'));
            } else {
                var startTime = charge_item_set.amendChargeItemForm.startDate;
                var endTime = charge_item_set.amendChargeItemForm.endDate;
                startTime = (new Date(startTime)).getTime();
                endTime = (new Date(endTime)).getTime();
                if(startTime > endTime){
                    callback(new Error('请选择正确的结束日期'));
                } else {
                    callback();
                }
            }
        }
    };
    var charge_item_set =
            new Vue({
                el: "#charge_item_set",
                data: {
                    chargeItemInfo:{},
                    labelPosition:'left',
                    tableData: [],// 表格信息
                    typeNames:[],
                    // 分页
                    currentPage: 1,
                    totalCount:'',
                    totalPage:'',
                    parameters:{
                        'currentPage':'',
                        'searchContent':''
                    },
                    // 添加、修改
                    addChargeItemForm:{
                        projectName:'',
                        typeName:'',
                        startDate:'',
                        endDate:'',
                        projectDesc:'',
                        status:'',
                        projectTypeId:''
                    },
                    amendChargeItemForm:{
                        projectName:'',
                        typeName:'',
                        startDate:'',
                        endDate:'',
                        projectDesc:'',
                        status:'',
                        projectTypeId:''
                    },
                    dialogAddChargeItemVisible:false,
                    dialogAmendChargeItemVisible:false,
                    dialogChargeItemInfoVisible:false,
                    rules: {
                        projectName: [
                            { required: true, message: '请输入项目名称', trigger: 'blur' },
                            {  max: 30, message: '长度在30个字符以内', trigger: 'blur' }
                        ],
                        projectTypeName: [
                            { required: true, message: '请选择项目类型', trigger: 'change' }
                        ],
                        startDate: [
                            { required: true, message: '请选择开始日期', trigger: 'change' }
                        ],
                        endDate: [
                            { required: true, message: '请选择结束日期', trigger: 'change' },
                            { validator: validateTime, trigger: 'blur' },
                        ],
                        projectTypeId: [
                            { required: true, message: '请选择项目类型', trigger: 'blur' }
                        ]
                    },
                },
                methods: {
                    // 关闭前清空内容before-close
                    emptyContent:function(){
                        if (charge_item_set.dialogAddChargeItemVisible){
                            charge_item_set.dialogAddChargeItemVisible = false;
                            charge_item_set.$refs.addChargeItemForm.resetFields();
                        }else if (charge_item_set.dialogAmendChargeItemVisible){
                            charge_item_set.dialogAmendChargeItemVisible = false;
                            charge_item_set.$refs.amendChargeItemForm.resetFields();
                        }

                    },
                    mouseEnterEvent: function(row, event, column){
                        if(event.label == '操作'){
                            column.style.cursor="default"
                        }
                        if(event.label != '操作'){
                            column.style.cursor="pointer"
                        }
                    },
                    // 分页加载数据
                    handleCurrentChange: function(currentPage){
                        Pagesearch(this,'${basePath}merchant/merchant/mProject/getProjectList1', this.parameters,currentPage,
                            function (resData) {
                                if(resData.status == 'success') {

                                }
                            });
                    },

                    // 删除
                    deleteRow: function(index, rows) {
                        stopMaoPao();
                        var that = this;
                        that.$confirm('确认删除该收费项目吗？','提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            var options ={"projectId":rows.projectId};
                            sendService('${basePath}/merchant/mProject/deleteMProject',options,function (resData) {
                                if(resData.status == 'success') {
                                    if(resData.msg.indexOf('该收费项目存在待缴费不能删除')> -1) {
                                        charge_item_set.$message({
                                            type: 'warning',
                                            message: resData.msg
                                        })
                                    }
                                    if(resData.msg.indexOf('删除成功')>-1) {
                                        charge_item_set.$message({
                                            type: 'success',
                                            message: resData.msg
                                        });
                                         reloadPage('${basePath}merchant/mProject/getProjectList');
                                    }
                                    if(resData.msg.indexOf('删除失败')>-1) {
                                        charge_item_set.$message({
                                            type: 'info',
                                            message: resData.msg
                                        })
                                    }
                                }
                            });
                        }).catch(function () {
                            that.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        })
                    },
                    // 搜索
                    searchFun: function(){
                        if(this.parameters.searchContent == '') {
                            reloadPage('${basePath}merchant/mProject/getProjectList');
                        }else {
                            Pagesearch(this, '${basePath}merchant/mProject/getProjectList1', this.parameters, 1,
                                function (resData) {
                                    if (resData.status == 'success') {

                                    }
                                });
                        }
                    },
                    // 详情
                    handleRowHandle:function (row,event,column) {
                        if(column.label==='操作'){
                            return
                        } else {
                            charge_item_set.dialogChargeItemInfoVisible = true;
                            charge_item_set.chargeItemInfo = row;
                        }
                    },
                    // 打开添加的弹窗
                    openAddChargeItem:function () {
                        var options = {};
                        charge_item_set.dialogAddChargeItemVisible = true;
                        sendService('${basePath}/merchant/mProject/getProjectType',options,
                            function (resData) {
                                if(resData.status == 'success'){
                                    charge_item_set.typeNames = resData.t;
                                }
                            });
                    },
                    // 关闭添加的弹窗
                    addCaleForm: function (formName) {
                        charge_item_set.dialogAddChargeItemVisible = false;
                        charge_item_set.$refs[formName].resetFields();
                    },
                    // 打开修改的弹窗
                    amendChargeItem:function (index,row) {
                        var options ={};
                        stopMaoPao();
                        charge_item_set.dialogAmendChargeItemVisible = true;
                        charge_item_set.amendChargeItemForm = row;
                        // 获取项目类型
                        sendService('${basePath}/merchant/mProject/getProjectType',options,
                            function (resData) {
                                if(resData.status == 'success'){
                                    charge_item_set.typeNames = resData.t;
                                }
                            });
                    },
                    // 关闭修改的弹窗
                    amendCaleForm: function (formName) {
                        charge_item_set.dialogAmendChargeItemVisible = false;
                        charge_item_set.$refs[formName].resetFields();
                    },
                    // 添加、修改提交功能
                    goConfirm: function (formName) {
                        charge_item_set.$refs[formName].validate(
                            function(valid) {
                                if (valid) {
                                    if(formName === 'addChargeItemForm'){
                                        sendService('${basePath}/merchant/mProject/saveOrUpdateMProject',charge_item_set.addChargeItemForm,function (resData) {
                                            if(resData.status == 'success'){
                                                if(resData.msg.indexOf('添加成功')> -1) {
                                                    charge_item_set.$message({
                                                        type: 'success',
                                                        message: resData.msg
                                                    });
                                                    // 保存成功后关闭弹窗
                                                    charge_item_set.dialogAddChargeItemVisible = false;
                                                    // 刷新页面
                                                    reloadPage('${basePath}merchant/mProject/getProjectList');
                                                }
                                                if(resData.msg.indexOf('项目名称已经存在')>-1) {
                                                    charge_item_set.$refs[formName].resetFields();
                                                    charge_item_set.$message({
                                                        type: 'warning',
                                                        message: resData.msg
                                                    });
                                                }
                                            }
                                        })
                                    }else if(formName === 'amendChargeItemForm'){
                                        sendService('${basePath}/merchant/mProject/saveOrUpdateMProject',charge_item_set.amendChargeItemForm,
                                            function (resData) {
                                                if(resData.status == 'success'){
                                                    if(resData.msg.indexOf('修改成功')> -1) {
                                                        charge_item_set.$message({
                                                            type: 'success',
                                                            message: resData.msg
                                                        });
                                                        // 保存成功后关闭弹窗
                                                        charge_item_set.dialogAmendChargeItemVisible = false;
                                                        // 刷新页面
                                                        reloadPage('${basePath}merchant/mProject/getProjectList');
                                                    }
                                                }
                                                if(resData.msg.indexOf('项目名称已经存在')>-1) {
                                                    charge_item_set.$refs[formName].resetFields();
                                                    charge_item_set.$message({
                                                        type: 'warning',
                                                        message: resData.msg
                                                    });
                                                }
                                            });
                                    }
                                } else {
                                    return false;
                                }
                            });
                    },
                },
                created: function () {
                    // 从后台获取请求数据的URL
                    Pagesearch(this,'${basePath}merchant/mProject/getProjectList1', null,1,function (resData) {
                        if(resData.status == 'success'){
                            // 成功后的callback
                            if(resData.status == 'success'){
                                resData.t.forEach(function (item) {
                                    item.startDate = new Date(item.startDate).Format('yyyy-MM-dd');
                                    item.endDate = new Date(item.endDate).Format('yyyy-MM-dd');
                                    if(item.status == '1'){
                                        item.status = '正常';
                                    } else if(item.status == '0'){
                                        item.status = '失效';
                                    }
                                });
                            }

                        }
                    });
                }
            });
</script>

<style scoped>
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }


    .charge_item_set .searchBox{
        height: 60px;
        line-height: 60px;
        padding-left: 30px;
        margin-bottom: 10px;
        background: #fff;
    }
    .charge_item_set .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    .charge_item_set .btnTypeSet{
        text-align: right;
    }
    .charge_item_set .footerBox{
        width: 100%;
        height: 50px;
        text-align: right;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
    }
    .el-dialog__body{
        padding: 40px 0 40px 100px;
    }
    .el-dialog__header span {
        padding-left: 20px;
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #aaa;
        font-size: 22px;
    }
    .dialogDetails .el-dialog {
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }
    .el-dialog__header {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__body {
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body {
        padding: 50px 0 0 0;
    }
    .dialogDetails .info-template-content .el-row:nth-child(even) {
        background-color: #efefef;
    }
    .dialogDetails .item-row {
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        padding-left: 100px;
    }
    .dialogDetails .item-row div:first-of-type {
        color: #aaa;
        text-align: left;
    }
    .dialogDetails .item-row div:last-of-type {
        color: #333;
        padding-left: 80px;
    }
    .dialogDetails .info-template-content .el-row:last-of-type {
        margin-bottom: 30px;
    }
</style>
